<template>
  <div class="view">
    <div class="appGroup">
      <img
        src="http://images.mafengwo.net/images/app/m/logo_gonglve_v6.png?v=20150825"
        class="appImg"
      />
      <span class="appList"  @mouseleave="onApp = false">
        <span class="appContent"  @mousemove="onApp = true">
          <a href="javascript:;">iPhone版</a>
          <a href="javascript:;" class="bian">Android版</a>
          <a href="javascript:;">iPad版</a>
        </span>
        <a href="javascript:;" class="appTitle" @mousemove="onApp = true">马蜂窝自由行APP下载</a>
        <img
          src="https://p3-q.mafengwo.net/s12/M00/17/80/wKgED1vb_fqAeZq0AAAxwHmnAuc675.png"
          class="onShow"
          v-show="onApp"
        />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        onApp:false
    };
  }
};
</script>

<style lang="stylus" scoped>
.view {

  .appGroup {
    width: 260px;
    height: 65px;
    border-bottom: 1px solid #ccc;
    display: flex;
    margin-top: 15px;

    .appImg {
      width: 50px;
      height: 50px;
    }

    .appList {
      margin-left: 20px;
      display: table;
      position: relative;

      .appTitle {
        color: orange;
        display: table-header-group;

        &:hover {
          text-decoration: underline;
        }
      }

      .appContent {
        font-size: 12px;
        color: #555;

        &:hover + .appTitle {
          text-decoration: underline;
        }

        .bian {
          position: relative;
          padding: 0 10px;

          &:before {
            content: '';
            width: 1px;
            background-color: #ccc;
            height: 11px;
            position: absolute;
            right: 2px;
            top: 3px;
          }

          &:after {
            content: '';
            width: 1px;
            background-color: #ccc;
            height: 11px;
            position: absolute;
            left: 3px;
            top: 3px;
          }
        }
      }

      .onShow {
        position: absolute;
        top: 18px;
        left: 9%;
        filter: blur(0.6px);
      }
    }
  }
}
</style>